$(function() {

	var x1,x2,x3,x4;
	$(".choose_area_title").click(function() {
		$(".choose_area_cont").slideToggle();
		$(".choose_subject_cont").slideUp();
		$(".choose_shcool_cont").slideUp();
		$('.choose_area_title img').toggleClass('on');
		$(".choose_shcool_title img").removeClass('on');
		$(".choose_subject_title img").removeClass('on');
	});
//2样式名
	$(".choose_style_title").click(function() {
		$(".choose_style_cont").slideToggle();
		$(".choose_subject_cont").slideUp();
		$(".choose_shcool_cont").slideUp();
		$(".choose_area_cont").slideUp();
		$('.choose_style_title img').toggleClass('on');
		$(".choose_area_title img").removeClass('on');
		$(".choose_shcool_title img").removeClass('on');
		$(".choose_subject_title img").removeClass('on');
	});
	$(".choose_style_cont li h4").click(function() {
		$(".choose_shcool_title").attr('disabled', false);
		//$(".choose_style_title").attr('disabled', false);
		$(".choose_shcool_cont").slideDown();
		$(".choose_style_cont").slideUp();
		$(".choose_style_title img").removeClass('on');
		$(".choose_shcool_title img").addClass('on');
		$(".choose_style_title h3").text('样式名:'+$(this).text())

		//2
		var text=$(this).text();
		x2=text;
		if(x2=='left'){yy='&nbsp;&nbsp;.left{}'}
		else if(x2=='center'){yy='&nbsp;&nbsp;.center{}'}
		else if(x2=='right'){yy='&nbsp;&nbsp;.right{}'}
		
		if(x1=='PC端'){xx=yy;}
		else if(x1=='手机端'){xx='@media (max-width: 768px) { <br>'+yy+'<br>}'}
		else if(x1=='平板端'){xx='@media (min-width: 768px) and (max-width: 992px) { <br>'+yy+'<br>}'}

		$('.content').html(xx);
		$('#code').html('&lt;div class="'+x2+'"&gt;媒体查询&lt;/div&gt;');

	});

	$(".choose_area_cont li h4").click(function() {
		//$(".choose_shcool_title").attr('disabled', false);
		$(".choose_style_title").attr('disabled', false);
		$(".choose_style_cont").slideDown();
		$(".choose_area_cont").slideUp();
		$(".choose_area_title img").removeClass('on');
		$(".choose_shcool_title img").addClass('on');
		$(".choose_area_title h3").text($(this).text())

		//1
		var text=$(this).text();
		if(text=='PC端'){
			$('.content').html('');
			$('#tq1').width("100%")
		}
		if(text=='手机端'){
			$('.content').html('@media (max-width: 768px) { <br>}')
			$('#tq1').width("50%")
		}
		if(text=='平板端'){
			$('.content').html('@media (min-width: 768px) and (max-width: 992px) { <br>}')
			$('#tq1').width("80%")
		}
		x1=text;

	  
	});
	$(".choose_shcool_title").click(function() {
		$(".choose_shcool_cont").slideToggle();
		$(".choose_area_cont").slideUp();
		$(".choose_subject_cont").slideUp();
		$('.choose_shcool_title img').toggleClass('on');
		$(".choose_area_title img").removeClass('on');
		$(".choose_subject_title img").removeClass('on');
	});
	$(".choose_shcool_cont li h3").click(function() {
		$(".choose_subject_title").attr('disabled', false);
		$(".choose_subject_cont").slideDown();
		$(".choose_shcool_cont").slideUp();
		$(".choose_shcool_title img").removeClass('on');
		$(".choose_subject_title img").addClass('on');
		$(".choose_shcool_title h3").text($(this).text())

		//3
		var text=$(this).text();
		if(text=='宽度') {$('.a2').addClass('none');$('.a1').removeClass('none')}
		else{$('.a1').addClass('none');$('.a2').removeClass('none')}
		$(".choose_subject h3").text('选择属性值');
		x3=text;

	});
	$(".choose_subject_title").click(function() {
		$(".choose_subject_cont").slideToggle();
		$(".choose_shcool_cont").slideUp();
		$(".choose_area_cont").slideUp();
		$('.choose_subject_title img').toggleClass('on');
		$(".choose_area_title img").removeClass('on');
		$(".choose_shcool_title img").removeClass('on')
	});
	$(".choose_subject_cont  li h4").click(function() {
		$(".choose_subject_cont").slideUp();
		$(".choose_subject_title img").removeClass('on');
	//	$(".choose_subject_cont li h4").text($(this).text())
		$(".choose_subject h3").text($(this).text())
		x4=$(this).text();
		//4
		if(x3=='宽度'){zz='width:'+x4}
		else if(x3=='颜色'){
			zz='color:'+x4;
			$('#test').css('color',x4);
			$('#test').css('background-color','white')
		}
		else if(x3=='背景色'){
			zz='background:'+x4;
			$('#test').css('background-color',x4)
			$('#test').css('color','black')
		}

		if(x2=='left'){yy='&nbsp;&nbsp;.left{<br>&nbsp;&nbsp;&nbsp;&nbsp;'+zz+'<br>&nbsp;&nbsp;}'}
		else if(x2=='center'){yy='&nbsp;&nbsp;.center{<br>&nbsp;&nbsp;&nbsp;&nbsp;'+zz+'<br>&nbsp;&nbsp;}'}
		else if(x2=='right'){yy='&nbsp;&nbsp;.right{<br>&nbsp;&nbsp;&nbsp;&nbsp;'+zz+'<br>&nbsp;&nbsp;}'}
		
		if(x1=='PC端'){xx=yy}
		else if(x1=='手机端'){xx='@media (max-width: 768px) { <br>'+yy+'<br>}'}
		else if(x1=='平板端'){xx='@media (min-width: 768px) and (max-width: 992px) { <br>'+yy+'<br>}'}

		$('.content').html(xx);

	});
})